<template>
	<view class="logistics-map-page">
		<!-- 页面头部 -->
		<view class="page-header">
			<view class="header-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="header-title">物流轨迹地图</view>
			<view class="header-right"></view>
		</view>

		<!-- 地图容器 -->
		<view class="map-container">
			<!-- 如果有地图URL，使用web-view显示 -->
			<view v-if="mapUrl" class="webview-container">
				<web-view :src="mapUrl" class="map-webview"></web-view>
			</view>
			
			<!-- 如果没有地图URL，显示自定义轨迹图 -->
			<view v-else class="custom-map">
				<view class="map-bg">
					<!-- 轨迹线 -->
					<view class="track-line" v-if="traces.length > 1">
						<view 
							v-for="(trace, index) in traces.slice(0, -1)" 
							:key="index"
							class="line-segment"
							:style="getLineStyle(trace, traces[index + 1])"
						></view>
					</view>
					
					<!-- 轨迹点 -->
					<view 
						v-for="(trace, index) in traces" 
						:key="index"
						class="track-point"
						:class="{ 'active': index === 0 }"
						:style="{ left: trace.x + '%', top: trace.y + '%' }"
						@click="onPointClick(trace, index)"
					>
						<view class="point-icon"></view>
						<view class="point-label">{{ trace.label }}</view>
						<view class="point-time" v-if="trace.time">{{ trace.time }}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 轨迹信息 -->
		<view class="track-info">
			<view class="info-title">轨迹详情</view>
			<view class="track-list">
				<view 
					v-for="(trace, index) in traces" 
					:key="index"
					class="track-item"
					:class="{ 'active': index === 0 }"
					@click="onPointClick(trace, index)"
				>
					<view class="track-dot"></view>
					<view class="track-content">
						<view class="track-desc">{{ trace.label }}</view>
						<view class="track-time" v-if="trace.time">{{ trace.time }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mapUrl: '',
				traces: [],
				logisticsInfo: {}
			}
		},
		onLoad(options) {
			// 接收传递的数据
			if (options.logisticsInfo) {
				try {
					this.logisticsInfo = JSON.parse(decodeURIComponent(options.logisticsInfo));
					this.mapUrl = this.logisticsInfo.RouteMapUrl || '';
					this.generateTraces();
				} catch (error) {
					console.error('解析物流信息失败:', error);
				}
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},

			// 生成轨迹数据
			generateTraces() {
				if (this.logisticsInfo.Traces && this.logisticsInfo.Traces.length > 0) {
					// 根据实际轨迹数据生成地图坐标
					const traces = this.logisticsInfo.Traces;
					const tracePoints = [];
					
					traces.forEach((trace, index) => {
						const x = 20 + (index * 60 / (traces.length - 1)) + (Math.random() - 0.5) * 20;
						const y = 30 + Math.random() * 40;
						
						tracePoints.push({
							x: Math.max(10, Math.min(90, x)),
							y: Math.max(20, Math.min(80, y)),
							label: trace.AcceptStation || `节点${index + 1}`,
							time: trace.AcceptTime || ''
						});
					});

					this.traces = tracePoints;
				} else {
					// 生成模拟数据
					this.traces = [
						{ x: 20, y: 50, label: '发货仓库', time: '09:00' },
						{ x: 45, y: 35, label: '分拣中心', time: '11:30' },
						{ x: 70, y: 60, label: '配送站', time: '14:20' },
						{ x: 85, y: 40, label: '收货地址', time: '16:45' }
					];
				}
			},

			// 计算线段样式
			getLineStyle(point1, point2) {
				const dx = point2.x - point1.x;
				const dy = point2.y - point1.y;
				const length = Math.sqrt(dx * dx + dy * dy);
				const angle = Math.atan2(dy, dx) * 180 / Math.PI;
				
				return {
					width: length + '%',
					left: point1.x + '%',
					top: point1.y + '%',
					transform: `rotate(${angle}deg)`,
					transformOrigin: '0 50%'
				};
			},

			// 点击轨迹点
			onPointClick(trace, index) {
				console.log('点击轨迹点:', trace, index);
				uni.showToast({
					title: trace.label,
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
</script>

<style>
	.logistics-map-page {
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.page-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.header-left {
		width: 60rpx;
	}

	.back-icon {
		font-size: 40rpx;
		color: #333;
	}

	.header-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.header-right {
		width: 60rpx;
	}

	.map-container {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.webview-container {
		width: 100%;
		height: 500rpx;
	}

	.map-webview {
		width: 100%;
		height: 500rpx;
	}

	.custom-map {
		width: 100%;
		height: 500rpx;
		position: relative;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.map-bg {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.track-line {
		position: absolute;
		width: 100%;
		height: 100%;
		pointer-events: none;
	}

	.line-segment {
		position: absolute;
		height: 4rpx;
		background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
		border-radius: 2rpx;
		opacity: 0.8;
	}

	.track-point {
		position: absolute;
		transform: translate(-50%, -50%);
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.track-point:hover {
		transform: translate(-50%, -50%) scale(1.1);
	}

	.point-icon {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background-color: #fff;
		border: 4rpx solid #4ecdc4;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
	}

	.track-point.active .point-icon {
		background-color: #ff6b6b;
		border-color: #ff6b6b;
		box-shadow: 0 4rpx 16rpx rgba(255, 107, 107, 0.4);
	}

	.point-label {
		position: absolute;
		top: 30rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: rgba(0, 0, 0, 0.8);
		color: #fff;
		padding: 8rpx 12rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
		white-space: nowrap;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.track-point:hover .point-label {
		opacity: 1;
	}

	.point-time {
		position: absolute;
		top: 60rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
		padding: 4rpx 8rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
		white-space: nowrap;
		opacity: 0;
		transition: opacity 0.3s ease;
	}

	.track-point:hover .point-time {
		opacity: 1;
	}

	.track-info {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.info-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
	}

	.track-list {
		position: relative;
	}

	.track-list::before {
		content: '';
		position: absolute;
		left: 15rpx;
		top: 0;
		bottom: 0;
		width: 2rpx;
		background-color: #e0e0e0;
	}

	.track-item {
		display: flex;
		align-items: flex-start;
		margin-bottom: 40rpx;
		position: relative;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.track-item:hover {
		background-color: #f8f8f8;
		border-radius: 8rpx;
		padding: 10rpx;
		margin: -10rpx -10rpx 30rpx -10rpx;
	}

	.track-item:last-child {
		margin-bottom: 0;
	}

	.track-dot {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		background-color: #e0e0e0;
		margin-right: 30rpx;
		position: relative;
		z-index: 1;
	}

	.track-item.active .track-dot {
		background-color: #ff6b6b;
	}

	.track-content {
		flex: 1;
		padding-top: 5rpx;
	}

	.track-desc {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		line-height: 1.4;
	}

	.track-time {
		font-size: 24rpx;
		color: #999;
	}
</style>

